<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>17商城</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript">
 $(function(){
	 $(".vipNav dd:first").show();
	 })
</script>
</head>

<body>
 <div class="mianCont">
   <div id="top">
 <div class="top">
   <span v-if="checkLogin">您好！{{user.nickName}}欢迎来到17商城!&nbsp;<a href="reg.html">[注册]</a></span>
   <span v-else>您好！欢迎来到17商城 请&nbsp;<a href="login.html">[登录]</a>&nbsp;<a href="reg.html">[注册]</a></span>
   <span class="topRight">
    <a href="vip.html">我的17</a>&nbsp;| 
    <a href="order.html">我的订单</a>&nbsp;| 
    <a href="vip.html">会员中心</a>&nbsp;|
    <a href="contact.html">联系我们</a>
   </span>
  </div><!--top/-->
  <div class="lsg">
   <h1 class="logo"><a href="index.html"><img src="images/logo.png" width="217" height="90" /></a></h1>
   <form action="#" method="get" class="subBox">
    <div class="subBoxDiv">
     <input type="text" class="subLeft" />
     <a href="product.html"><input type="button" value="搜索" width="63" height="34" class="sub"/> </a>
     <div class="hotWord">
      热门搜索：
      <a href="product.html?苹果">苹果</a>&nbsp;
      <a href="product.html?桃子">桃子</a> &nbsp;
     </div><!--hotWord/-->
    </div><!--subBoxDiv/-->
   </form><!--subBox/-->
   <div class="gouwuche">
    <div class="gouCar">
     <img src="images/gouimg.png" width="19" height="20" style="position:relative;top:6px;" />&nbsp;|&nbsp;
     <strong class="red" v-html="Object.keys(carts).length">0</strong>&nbsp;件&nbsp;|
     
     <a href="order.html">去结算</a> <img src="images/youjian.jpg" width="5" height="8" />    
    </div><!--gouCar/-->
    <div class="myChunlv">
     <a href="vip.html"><img src="images/mychunlv.jpg" width="112" height="34" /></a>
    </div><!--myChunlv/-->
   </div><!--gouwuche/-->
  </div><!--lsg/-->
  </div>
  <div id="app">
  <div class="pnt">
   <div class="pntLeft">
    <h2 class="Title">会员中心</h2>
   </div><!--pntLeft/-->
   <div class="pntRight">
    <ul class="nav">
     <li><a href="index.html">商城首页</a></li>
     <li><a href="product.html">促销中心</a></li>
     <li><a href="login.html">会员中心</a></li>
     <li><a href="help.html">帮助中心</a></li>
     <div class="clears"></div>
     <div class="phone">TEL：021-12345678</div>
    </ul><!--nav/-->
   </div><!--pntRight/-->
   <div class="clears"></div>
  </div><!--pnt/-->
  <div class="positions">
   当前位置：<a href="index.html">首页</a> &gt; <a href="vip.html">会员中心</a>
    &gt; <a href="#" class="posCur">个人中心</a>
  </div><!--positions/-->
  <div class="cont">
   <div class="contLeft" id="contLeft">
    <h3 class="leftTitle">会员中心</h3>
    <dl class="helpNav vipNav">
     <dt>我的主页</dt>
      <dd>
       <a href="vip.html" class="vipCur">个人中心</a>
       <a href="/order/vipOrder.html">我的订单</a>
      </dd>
     <dt>账户设置</dt>
      <dd>
       <a href="vipPwd.html">密码修改</a>
       <a href="vipAdress.html">收货地址</a>
      </dd>
      <dt>客户服务</dt>
       <dd>
        <a href="vipExit.html">网站使用条款</a>
        <a href="vipTuihuo.html">网站免责声明</a>
        <a href="message.html">在线留言</a>
       </dd>
    </dl><!--helpNav/-->
   </div><!--contLeft/-->
   <div class="contRight">
   <h1 class="vipName" ><span>用户名：</span> {{user.nickName}} <strong class="vipUp">[点击修改/补充个人信息]</strong></h1>
    <table class="vipMy">
   	    <tr>
            <th>头像</th>
            <td ><img :src='user.photo' alt="" style="width: 100px;height: 100px;" @click="isOpen = true"/></td>
        </tr>
        <tr>
            <th>用户名</th>
            <td >{{user.nickName}}</td>
        </tr>
        <tr>
            <th>邮箱</th>
            <td>{{user.email}}</td>
        </tr>
        <tr>
            <th>真实姓名</th>
            <td v-if="user.realName === ''">未填写</td>
            <td v-else>{{user.realName}}</td>
        </tr>
        <tr>
            <th>联系方式</th>
            <td v-if="user.tel === ''">未填写</td>
            <td v-else>{{user.tel}}</td>
        </tr>
    </table>
    <!--vipMy/-->
    <div class="address">
    <div class="addList">
     <label>用户名:</label>
     <input v-model="updataUser.nickName" id="nickName" classa="nickName" type="text" />
     <span class="red">* </span>
    </div><!--addList-->
    <div class="addList">
     <label>邮箱:</label>
     <input v-model="updataUser.email"  id="email"  type="text" />
     <span class="red" >* </span>
    </div><!--addList-->
    <div class="addList">
     <label>真实姓名:</label>
     <input v-model="updataUser.realName"  id="realName"  type="text" />
     <span class="red">* </span>
    </div><!--addList-->
     <div class="addList">
     <label>联系方式:</label>
     <input v-model="updataUser.tel"  id="tel"  type="text" />
     <span class="red">* </span>
    </div><!--addList-->
    <div class="addList2">
     <input type="image" src="images/baocun.png" width="79" height="30" @click="updata()"/>
    </div><!--addList2/-->
   </div><!--address/-->
   </div><!--contRight/-->
   <div class="clears"></div>
  </div><!--cont/-->
  <div class="inHelp">
   <div class="inHLeft">
    <h4>帮助中心</h4>
    <ul class="inHeList">
     <li><a href="help.html">购物指南</a></li>
     <li><a href="help.html">支付方式</a></li>
     <li><a href="help.html">售后服务</a></li>
     <li><a href="about.html">企业简介</a></li>
     <div class="clears"></div>
    </ul><!--inHeList/-->
   </div><!--inHLeft/-->
   <div class="inHLeft">
    <h4>会员服务</h4>
    <ul class="inHeList">
     <li><a href="reg.html">会员注册</a></li>
     <li><a href="login.html">会员登录</a></li>
     <li><a href="order.html">购物车</a></li>
     <li><a href="order.html">我的订单</a></li>
     <div class="clears"></div>
    </ul><!--inHeList/-->
   </div><!--inHLeft/-->
   <div class="inHRight">
    <h4>全国统一免费服务热线</h4>
    <div class="telBox">400-8000-0000</div>
    <div class="weibo">
    </div>
   </div><!--inHRight/-->
   <div class="clears"></div>
  </div><!--inHelp/-->
  
       <div class="overlay" style=" position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;" v-if="isOpen">
      <div class="modal" style="  background-color: white;
  padding: 20px;">
        <!-- 弹出层内容 -->
        
        
        <h1>选择头像</h1>
 		<label for="avatarInput">图片上传</label>
  		<input type="file" @change="handleFileChange" id="avatarInput" />
  		<a href="video.html"><button>拍照上传</button></a>
  		<div id="imagePreview">
  		<img id="avatarPreview" :src="fileUrl" alt="图片显示" style="width: 100px;height: 100px;"/>
  		</div>
        <!-- 关闭按钮 -->
        <button @click="picture">上传头像</button>
        <button @click="isOpen = false">关闭</button>
      </div>
    </div>
  
  <div class="footer">
   <p>
   <a href="#">进入17官网</a>&nbsp;|&nbsp;
   <a href="index.html">商城首页</a>&nbsp;|&nbsp;
   <a href="product.html">促销中心</a>&nbsp;|&nbsp;
   <a href="order.html">我的订单</a>&nbsp;|&nbsp;
   <a href="new.html">新闻动态</a>&nbsp;|&nbsp;
   <a href="login.html">会员中心</a>&nbsp;|&nbsp;
   <a href="help.htmll">帮助中心</a>
   </p>
   <p>
    版权所有：上海17实业有限公司 版权所有  Copyright 2010-2015   沪ICP备10213975号   技术支持：<a href="http://www.htmlsucai.com" target="_blank">秦王网络</a>
   </p>
  </div><!--footer/-->
 </div><!--mianCont/-->
 </div>
 <a href="#" class="backTop">&nbsp;</a>
 
 <script src="js/show-dialog.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/axios.js" type="text/javascript"></script>
<script src="js/qs.js" type="text/javascript"></script>
<script src="js/top.js" type="text/javascript"></script>

<script>
$(function(){
	
	$("#nickName").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});
	
	//聚焦事件
	$("#nickName").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
	
	$("#email").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});
	
	//聚焦事件
	$("#email").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
	
	$("#realName").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});
	
	//聚焦事件
	$("#realName").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
	
	$("#tel").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});
	
	//聚焦事件
	$("#tel").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
});

let app = new Vue({
	el: "#app",
	data: {
		checkLogin: false,
		user: {},
		updataUser:{},
		isOpen: false,
		file: null,
	    fileUrl: './images/01.jpg'
	},
	mounted: function(){
		/**if (header.checkLogin){
			showmsg("请先登录...", "red", function(){
				location.href="/login.html";
			})
			return;
		}**/
		
		/**axios.post("/user/member/findAllDate").then(rt => {
			if (rt.status == 200 && rt.data.code == 200){
				this.checkLogin = true;
				this.user = rt.data.data;
				this.user.photo = rt.data.data.photo.replace("../../../", "");
				this.updataUser = JSON.parse(JSON.stringify(this.user));
				return;
			}
			
			this.checkLogin = false;
		})**/
		
		let params = new URLSearchParams(window.location.search);
		let paramValue = params.get('value');
		console.log(paramValue); // 输出参数值
		if (paramValue==99){
			this.file = localStorage.getItem('savedImage');
			this.isOpen = true,
			this.fileUrl = this.file; 
		} else {
			this.fileUrl = this.user.photo; 
		}
	},
	methods: {		
		/**updata: function() {
			$("#nickName").blur();
			$("#pwd").blur();
			$("#code").blur();
			
			let divs = $(".red");
			for (let i = 1,len = divs.length; i<len; i++){
				if ($(divs[i]).css("visibility") != 'hidden'){
					console.info(i + $(divs[i]).css("visibility"));
					showmsg("信息不能为空...", "red");
					return false;
				}
			}
			axios.post("member/updata", qs.stringify(this.updataUser)).then(rt =>{
				console.info(rt);
				if (rt.status == 200) {
						showmsg("修改成功！！", "green");
						location.reload();
						return;
				}
				showmsg("修改失败，请稍后重试...", "red");
				location.reload();
				return;
			})
		},**/
		handleFileChange(event) {
		      const file = event.target.files[0];
		      this.file = file;
		      this.fileUrl = URL.createObjectURL(file);
		},
		/*picture(){
			console.info("存储图片");
			console.info(this.file);
			 let base64Index = this.file.indexOf(',') + 1;
		     let truncatedBase64 = this.file.substring(base64Index);
		      
			// 将base64字符串转换为二进制数据
			function base64ToBinary(base64Str) {
			  const binaryStr = atob(base64Str);
			  const len = binaryStr.length;
			  const bytes = new Uint8Array(len);
			  for (let i = 0; i < len; i++) {
			    bytes[i] = binaryStr.charCodeAt(i);
			  }
			  return bytes;
			}

			// 测试示例
			const base64Str = truncatedBase64;

			// 转换为二进制数据
			const binaryData = base64ToBinary(base64Str);

			console.log(binaryData);  // 输出二进制数据
			
			// 创建FormData对象，并添加文件对象到其中
			let formData = new FormData();
			formData.append('upload', binaryData);
			 $.ajax({
			        url: "member/upload",
			        data: formData,
			        dataType: "json",
			        type: "post",
			        contentType: false, //上传文件一定要是false
			        processData: false,
			        success: function(rt, status) {
			        	console.info(rt);
			        	if(rt.code == 200) {
			        		showmsg("上传成功....", "green");
			        		location.href = "udai_setting.html";
			        	}
			        	if(rt.code == 500) {
			        		showmsg("上传失败....", "red");
			        	}
					},
					error: function(rt, status, e) {
						showmsg("上传失败....", "red");
					}
			    }); 
		}*/
		picture() {
			  this.isOpen = false
			  console.info("存储图片");
			  console.info(this.file);
			  
			  if (this.file.name != null){
				// 创建一个空的FormData对象
				  let formData = new FormData();

				  // 将File对象添加到FormData中
				  formData.append('file', this.file);
				  
				  $.ajax({
					    url: "member/upload",
					    data: formData,
					    dataType: "json",
					    type: "post",
					    contentType: false, // 上传文件一定要是 false
					    processData: false,
					    success: function(rt, status) {
					      console.info(rt);
					      if (rt.uploaded == 1) {
					        showmsg("上传成功....", "green");
					        
					        console.info(rt.url);
					        
					        localStorage.setItem('savedImage', '');
					        
					        $.post("member/updataPhoto", {photo: rt.url}, rt => {
					        	this.isOpen=false;
								if (rt.code == 200) {
										showmsg("修改成功！！", "green");
										location.reload();
										
										return;
								} else if (rt.code != 200){
									showmsg("修改失败，请稍后重试...", "red");
									return;
								}
								return;
							}, "json");
					      } else {
					        showmsg("上传失败....请稍后重试", "red");
					      }
					    },
					    error: function(rt, status, e) {
					      showmsg("上传失败....", "red");
					    }
					  });
				  
				  return;
			  }
			  
			  let base64Index = this.file.indexOf(',') + 1;
			  let truncatedBase64 = this.file.substring(base64Index);
			  
			  // 将 base64 字符串转换为二进制数据
			  function base64ToBinary(base64Str) {
			    const binaryStr = atob(base64Str);
			    const len = binaryStr.length;
			    const bytes = new Uint8Array(len);
			    for (let i = 0; i < len; i++) {
			      bytes[i] = binaryStr.charCodeAt(i);
			    }
			    return bytes;
			  }

			  // 转换为二进制数据
			  const base64Str = truncatedBase64;
			  const binaryData = base64ToBinary(base64Str);
			  console.log(binaryData); // 输出二进制数据

			  // 创建 FormData 对象，并添加文件对象到其中
			  let formData = new FormData();
			  let file = new File([binaryData], "image.jpg", { type: 'image/jpeg' });
			  formData.append('file', file);

			  $.ajax({
			    url: "member/upload",
			    data: formData,
			    dataType: "json",
			    type: "post",
			    contentType: false, // 上传文件一定要是 false
			    processData: false,
			    success: function(rt, status) {
			      console.info(rt);
			      if (rt.uploaded == 1) {
			        showmsg("上传成功....", "green");
			        
			        console.info(rt.url);
			        
			        localStorage.setItem('savedImage', '');
			        
			        $.post("member/updataPhoto", {photo: rt.url}, rt => {
			        	console.info(rt);
			        	this.isOpen=false;
						if (rt.code == 200) {
								showmsg("修改成功！！", "green");
								window.location.href = "vip.html";
								
								return;
						} else if (rt.code != 200){
							showmsg("修改失败，请稍后重试...", "red");
							return;
						}
						return;
					}, "json");
			        
			      } else {
			        showmsg("上传失败....请稍后重试", "red");
			      }
			    },
			    error: function(rt, status, e) {
			      showmsg("上传失败....", "red");
			    }
			  });
			}
	}
})
</script>
</body>
</html>